<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon"  th:href="@{/chqimage/favicon.ico}" type="image/x-icon">
    <title>信息填写</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" th:href="@{/chqcss/register.css}">
    <script type="text/javascript" th:src="@{/chqjs/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/chqjs/vue.min.js}"></script>
</head>
<body>
<div id="head">
    <a href="#" class="return_img float_left"><img  src="/chqimage/icon-fanh.png" alt=""></a>
    <p class="head_title">信息填写</p>
</div>
<div id="personalInfo_box">
    <form action="#" method="post" id="info">
        <p><span class="required">*</span><span>姓名</span><input type="text"  v-model="userName" id="userName"  placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>性别</span><input type="text" v-model="userSex"  id="userSex" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>出生年月</span><input type="text" v-model="userBirth"  id="userBirth" placeholder="2012-12-12" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>身份证号码</span><input type="text" v-model="userCardId"  id="userCardId" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>手机号码</span><input type="text" v-model="userTel"  id="userTel" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>籍贯</span><input type="text" v-model="userJig"  id="userJig" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>民族</span><input type="text" v-model="userMinz"  id="userMinz" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>地址</span><input type="text" v-model="userAddr"  id="userAddr" placeholder="请输入" autocomplete="off" class="float_right"></p>
    </form>
    <!--下一步-->
    <div class="next_step" @click='printinfo'>下一步</div>
</div>

<script>
    var app;
    app = new Vue({
        el: '#personalInfo_box',
        data: {
            userName: '',
            userSex: '',
            userBirth: '',
            userCardId: '',
            userTel: '',
            userJig: '',
            userMinz: '',
            userAddr: ''
        },
        mounted:function () {
            localStorage.clear();
        },
        methods: {
            printinfo: function () {
//               console.log(this.userName);
                if (this.userSex == '男') {
                    userSex = 1;
                } else if (this.userSex == '女') {
                    userSex = 2;
                } else {
                    $('#userSex').focus().val("");
                    return false;
                }
                // 判断必填项.
                var userRequired = [this.userName, userSex, this.userBirth, this.userCardId, this.userTel];
                for (var i = 0; i < userRequired.length; i++) {
                    if (userRequired[i] == '') {
//                        console.log('请输入');
                        $('#info').find('input').eq(i).focus();
                        return false;
                    }
                }
                var userInfo={
                    userName:this.userName,
                    userSex:userSex,
                    userBirth:this.userBirth,
                    userCardId:this.userCardId,
                    userTel:this.userTel,
                    userJig:this.userJig,
                    userMinz:this.userMinz,
                    userAddr:this.userAddr
                };

                var _that = this;
                $.ajax({
                     url:'/user/add',
                     type:'get',
                     data:userInfo,
                     dataType:'json',
                     success:function (userId) {
                         var user = {
                             'userName':_that.userName,
                             'userId':userId
                         };
                        user=JSON.stringify(user);
                        window.localStorage.setItem('localUser',user);
                         window.location.href = '/user/mediate-guide';
                     },
                     error:function (err) {
                         console.log(err);
                         return false;
                     }
                 });
            }
        }
    });

</script>

</body>
</html>